<template>
  <div class="FactoryOverview">
    <div class="leftFactory">
      <div class="conList second">
        <p class="conTitle">
          <span>环境监测</span>
        </p>
        <ul class="conMain">
          <li>
            <p class="sctsIcon1"></p>
            <p>温度</p>
            <p><span>25.6</span>℃</p>
            <p>标准</p>
          </li>
          <li>
            <p class="sctsIcon2"></p>
            <p>湿度</p>
            <p><span>53.6</span>%</p>
            <p>标准</p>
          </li>
          <li>
            <p class="sctsIcon3"></p>
            <p>TVOC</p>
            <p><span>0.0001</span>ppm</p>
            <p>标准</p>
          </li>
          <li>
            <p class="sctsIcon4"></p>
            <p>室内PM2.5</p>
            <p><span>85</span>ug/m³</p>
            <p class="warring">轻度污染</p>
          </li>
        </ul>
      </div>
      <div class="conList first">
        <p class="conTitle">
          <span>任务达成分析</span>
        </p>
        <div class="yieldBox">
          <div class="title">
            月达成率
            <span>97</span>%
          </div>
          <div class="yieldList" ref="yieldRef"></div>
        </div>
      </div>
      <div class="conList third">
        <p class="conTitle">
          <span>出入库统计</span>
          <p class="last">
            <span>
              <i style="margin-right:3px;display:inline-block;transform:rotate(45deg);width:8px;height: 8px;background-color:#5ee46a;"></i>
              出库
              </span>
            <span>
              <i style="margin-right:3px;display:inline-block;transform:rotate(45deg);width:8px;height: 8px;background-color:#02a6f6;"></i>
              入库
              </span>
          </p>
        </p>
        <div class="conMain">
          <div class="titleBox">
            <div class="title">
              <p>
                当日入库量
                <span>564</span>
              </p>
            </div>
            <div class="title">
              <p>
                当日出库量
                <span>2564</span>
              </p>
            </div>
            <div class="title">
              <p>
                当日库存量
                <span>641</span>
              </p>
            </div>
          </div>
          <div class="crkList" ref="crkRef"></div>
        </div>
      </div>
    </div>
    <div class="centerMain">
      <ul class="topMain">
        <li class="inventoryBox inventory7"></li>
        <li>
          <p>任务充成率</p>
          <p><span>96</span>%</p>
        </li>
        <li class="inventoryBox inventory8"></li>
        <li>
          <p>盘点准确率</p>
          <p><span>82</span>%</p>
        </li>
        <li class="inventoryBox inventory9"></li>
        <li>
          <p>原料周转率</p>
          <p><span>96</span>次/月</p>
        </li>
        <li class="inventoryBox inventory10"></li>
        <li>
          <p>当前齐套率</p>
          <p><span>23.16</span>%</p>
        </li>
      </ul>
    </div>
    <div class="rightFactory">
      <div class="rightF2 rightStyles conList">
        <p class="conTitle">
          <span>智能预测提示</span>
        </p>
        <ul class="con">
          <li>
            智能备料提示
            <span>564</span>
          </li>
          <li>
            库位分配建议
            <span>82</span>
          </li>
          <li>
            库存呆滞提示
            <span>42</span>
          </li>
        </ul>
      </div>
      <div class="rightF4 rightStyles conList">
        <p class="conTitle">
          <span>库容分析</span>
        </p>
        <div class="con">
          <ul class="conTop">
            <li>
              总储位
              <span class="mt">564</span>
            </li>
            <li>
              占用储位
              <span class="mt">82</span>
            </li>
            <li>
              储位利用率
              <p class="mt"><span>42</span>%</p>
            </li>
          </ul>
          <div class="zlBottom">
            <ul>
              <li class="left">
                <div class="krTxtBox">
                  <p><img src="../../assets/img/icon1.png"/></p>
                  <p>
                    <span>有料储位</span>
                    <span>356</span>
                  </p>
                </div>
                <div class="krTxtBox">
                  <p><img src="../../assets/img/icon2.png"/></p>
                  <p>
                    <span>不可用储位</span>
                    <span>52</span>
                  </p>
                </div>
              </li>
              <li class="productionEquipmentBox">
                <div class="textZL">
                  <p>总储位</p>
                  <p><span>4554</span></p>
                </div>
                <div class="productionEquipment" ref="energyRef"></div>
              </li>
              <li class="right">
                <div class="krTxtBox">
                  <p><img src="../../assets/img/icon3.png"/></p>
                  <p>
                    <span>空储位</span>
                    <span>121</span>
                  </p>
                </div>
                <div class="krTxtBox">
                  <p><img src="../../assets/img/icon4.png"/></p>
                  <p>
                    <span>空料盘</span>
                    <span>81</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="rightF3 conList">
        <p class="conTitle">
          <span>物料分布</span>
        </p>
        <div class="materialList" ref="materialRef"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
let statusTable = ref('on')
let crkList = null
let yieldList = null
let energyList = null
let materialList = null
const yieldRef = ref(null)
const energyRef = ref(null)
const crkRef = ref(null)
const materialRef = ref(null)


// 能耗监测
const getEnergyInit = () => {
  let option = {
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        clockwise: false, // 逆时针
        itemStyle: {
          borderRadius: 1,
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 356, name: '有料储位' },
          { value: 52, name: '不可用储位' },
          { value: 121, name: '空储位' },
          { value: 81, name: '空料盘' },
        ],
        color: ['#0b5ccf', '#e7a14d', '#0dc76b', '#5712e0']
      }
    ]
  }
  energyList.setOption(option, true)
  window.addEventListener("resize", resize)
}
// 出入库统计
const getCRKInit = () => {
  let option = {
    xAxis: [
      {
        type: 'category',
        data: ['1/1', '2/1', '3/1', '4/1', '5/1', '6/1'],
        axisPointer: {
          type: 'shadow'
        },
        axisLabel: {
          color: '#adc2d0',
          fontSize: 10
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 300,
        interval: 100,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            width: 1,
            color: '#2d3d4f'
          }
        },
        axisLabel: {
          color: '#adc2d0',
          fontSize: 10
        }
      },
    ],
    series: [
      {
        name: '入库',
        type: 'bar',
        barWidth: 10,
        data: [
          76.7, 135.6, 162.2, 32.6, 200.0, 250
        ],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#0366d7' },
            { offset: 1, color: '#112d4d' }
          ])
        },
      },
      {
        name: '出库',
        type: 'bar',
        barWidth: 10,
        data: [
          9.0, 26.4, 28.7, 70.7, 175.6, 260
        ],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#14e336' },
            { offset: 1, color: '#174230' }
          ])
        },
      }
    ],
    grid: {
      top: '10px',
      left: '15%',
      right: '8%',
      bottom: '25%',
    },
  }
  crkList.setOption(option, true)
  window.addEventListener("resize", resize)
}
const getYieldInit = () => {
  let option = {
    legend: {
      data: ['标准', '计划'],
      itemWidth: 6,  // 设置宽度
      itemHeight: 6, // 设置高度
      icon: 'diamond',
      textStyle: {
        color: '#96b2d2',
        fontSize: 10
      },
      left: '5%',
      top: '1%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: ['7/03', '7/04', '7/05', '7/06', '7/07', '7/08', '7/09', '7/10'],
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 1,
          color: '#2d3d4f'
        }
      },
      type: 'value',
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    series: [
      {
        name: '标准',
        data: [120, 200, 150, 80, 70, 110, 130, 300],
        type: 'bar',
        barWidth: 12,
        z: 9,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#5df69d' },
            { offset: 1, color: '#0f8d7e' }
          ])
        },
      },
      {
        name: '计划',
        type: 'line', // 折线图类型
        z: 8,
        data: [200, 240, 360, 120, 210, 420, 250, 470],
        areaStyle: {
          color: "rgba(1,36,64,0.5)",
        },
      },
    ],
    grid: {
      top: '30px',
      left: '15%',
      right: '8%',
      bottom: '25%',
    },
  }
  yieldList.setOption(option, true)
  window.addEventListener("resize", resize)
}
const getMaterialInit = () => {
  let option = {
    grid: {
      top: '30px',
      left: '15%',
      right: '8%',
      bottom: '20%',
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#273a4d'
        }
      },
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      },
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      },
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: '#314456',
        }
      },
      data: ['主板', '元气塑封', '塑封袋', '主板', '网卡']
    },
    series: [
      {
        name: '2011',
        type: 'bar',
        barWidth: 6,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#01cef7' },
            { offset: 1, color: '#10294d' }
          ])
        },
        data: [1000, 800, 1600, 2400, 3200]
      },
    ]
  }
  materialList.setOption(option, true)
  window.addEventListener("resize", resize)
}

const resize = () => {
  crkList.resize()
  yieldList.resize()
  energyList.resize()
  materialList.resize()
}
const echartsInit = () => {
  yieldList = echarts.init(yieldRef.value)
  crkList = echarts.init(crkRef.value)
  energyList = echarts.init(energyRef.value)
  materialList = echarts.init(materialRef.value)
}
onMounted(() => {
  echartsInit()
  getYieldInit()
  getEnergyInit()
  getCRKInit()
  getMaterialInit()
});
</script>

<style scoped lang="less">
.FactoryOverview {
  display: flex;
  justify-content: space-between;
  background: url(../../assets/img/bg3.png) no-repeat;
  background-size: 100% 100%;
  .leftFactory {
    margin-top: -20px;
    .conList {
      width: 530px;
    }
    .first {
      height: 326px;
      background: rgba(1, 27, 55, 0.6);
      margin: 20px 0;
      .yieldBox {
        position: relative;
        .title {
          padding: 3px 15px;
          background: rgba(216, 240, 255, 0.1);
          border-left: 1px solid #6e7a83;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 8%;
          top: 2%;
          span {
            font-size: 24px;
            color: #00f6ff;
            margin: 0 4px;
          }
        }
        .yieldList {
          width: 530px;
          height: 285px;
        }
      }
    }
    .second {
      height: 266px;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        width: 520px;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 55px;
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          line-height: 24px;
          font-size: 12px;
          p {
            color: #bfc2c6;
            font-size: 14px;
            &:first-child {
              width: 50px;
              height: 50px;
              margin-bottom: 5px;
            }
            &:last-child {
              margin-top: 5px;
              font-size: 12px;
              color: #fff;
              background-color: #05ab49;
              line-height: 18px;
              border-radius: 2px;
              padding: 0 5px;
            }
            span {
              color: #fff;
              font-size: 20px;
              margin-right: 3px;
            }
            &.warring {
              background-color: #d09605;
            }
          }
          .sctsIcon1 {
            background: url(../../assets/img/sctsIcon1.png) no-repeat center;
            background-size: contain;
          }
          .sctsIcon2 {
            background: url(../../assets/img/sctsIcon2.png) no-repeat center;
            background-size: contain;
          }
          .sctsIcon3 {
            background: url(../../assets/img/sctsIcon3.png) no-repeat center;
            background-size: contain;
          }
          .sctsIcon4 {
            background: url(../../assets/img/sctsIcon4.png) no-repeat center;
            background-size: contain;
          }
        }
      }
    }
    .third {
      height: 306px;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        .titleBox {
          display: flex;
          justify-content: center;
          gap: 30px;
          margin-top: 10px;
          p {
            width: 137px;
            height: 60px;
            background: url(../../assets/img/kuang.png) no-repeat center;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 20px;
            color: rgba(255, 255, 255, 0.7);
            span {
              font-size: 24px;
              color: #ffffff;
              text-shadow: 0px 0px 4px #00a7ff;
            }
          }
        }
      }
      .crkList {
        width: 530px;
        height: 180px;
      }
      .last {
        display: flex;
        span {
          position: relative;
          display: block;
          padding-left: 65px;
          color: #96b2d2;
        }
      }
    }
  }
  .centerMain {
    width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 60px;
    .topMain {
      width: 756px;
      height: 91px;
      background-image: linear-gradient(
        to bottom,
        rgba(0, 67, 118, 1),
        rgba(0, 67, 118, 0),
        rgba(0, 67, 118, 1)
      );
      border: 1px solid #0b5056;
      border-radius: 5px;
      display: flex;
      align-items: center;
      li {
        width: 100px;
        padding-left: 5px;
        color: #b3bcc5;
        p {
          white-space: nowrap;
        }
        span {
          color: #fff;
          text-shadow: 0px 0px 4px #00a7ff;
          font-size: 30px;
          margin-right: 2px;
        }
      }
      .inventory7 {
        background: url(../../assets/img/inventory7.png) no-repeat right;
      }
      .inventory8 {
        background: url(../../assets/img/inventory8.png) no-repeat right;
      }
      .inventory9 {
        background: url(../../assets/img/inventory9.png) no-repeat right;
      }
      .inventory10 {
        background: url(../../assets/img/inventory10.png) no-repeat right;
      }
      .inventoryBox {
        background-size: contain;
        width: 68px;
        height: 60px;
        margin-left: 15px;
        border-left: 1px solid;
        border-image: linear-gradient(
            to bottom,
            rgba(32, 80, 97, 0),
            rgba(32, 80, 97, 1),
            rgba(32, 80, 97, 0)
          )
          1;
        &:first-child {
          border-left-width: 0;
        }
      }
    }
  }
  .rightFactory {
    width: 530px;
    margin-top: -26px;
    .conList {
      margin-top: 10px;
      background: rgba(1, 27, 55, 0.6);
    }
    .rightStyles {
      .con {
        display: flex;
        flex-direction: column;
        .text {
          width: 456px;
          height: 90px;
          background-size: 100% auto;
          display: flex;
          justify-content: center;
          align-items: center;
          li {
            padding: 0 30px;
            position: relative;
            &::after {
              content: "";
              display: block;
              position: absolute;
              right: -2px;
              top: 8px;
              height: 45px;
              border-right: 1px dashed #999;
            }
            &:last-child {
              &::after {
                height: 0px;
              }
            }
            p {
              color: rgba(255, 255, 255, 0.7);
              span {
                font-size: 32px;
                color: #fff;
                margin-right: 2px;
              }
            }
          }
        }
        .zlBottom {
          display: flex;
          justify-content: start;
          padding-left: 50px;
          align-items: center;
          height: 235px;
          .tip {
            color: #7d838a;
            font-size: 14px;
          }
        }
      }
    }
    .rightF2 {
      width: 530px;
      height: 194px;
      .con {
        display: flex;
        flex-direction: inherit;
        gap: 50px;
        align-items: center;
        justify-content: center;
        height: 143px;
        li {
          width: 110px;
          height: 110px;
          color: rgba(255, 255, 255, 0.7);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: url(../../assets/img/dz.png) no-repeat bottom;
          background-size: contain;
          span {
            color: #ffffff;
            font-size: 30px;
            margin-top: 10px;
            margin-bottom: 30px;
          }
        }
      }
    }
    .rightF3 {
      width: 530px;
      height: 395px;
      .materialList {
        width: 530px;
        height: 340px;
      }
    }
    .rightF4 {
      width: 530px;
      height: 326px;
      .conTop {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 110px;
        li {
          width: 280px;
          height: 80px;
          color: rgba(255, 255, 255, 0.7);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-left: 1px solid;
          border-image: linear-gradient(
              to bottom,
              rgba(32, 80, 97, 0),
              rgba(32, 80, 97, 1),
              rgba(32, 80, 97, 0)
            )
            1;
          &:first-child {
            border-left-width: 0;
          }
          span {
            color: #ffffff;
            font-size: 30px;
            text-shadow: 0px 0px 4px #00a7ff;
          }
          .mt {
            margin-top: 8px;
          }
        }
      }
      .zlBottom {
        height: 140px !important;
        padding: 0 32px !important;
        ul {
          width: 530px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .krTxtBox {
            width: 148px;
            height: 62px;
            margin-bottom: 5px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: start;
            padding-left: 30px;
            gap: 10px;
            p {
              &:last-child {
                display: flex;
                flex-direction: column;
              }
              &:first-child {
                width: 24px;
                height: 24px;
                img {
                  max-height: 100%;
                  width: auto;
                }
              }
              span {
                color: rgba(255, 255, 255, 0.8);
                &:last-child {
                  margin-top: 4px;
                  font-size: 18px;
                  color: #fff;
                }
              }
            }
            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: url(../../assets/img/kuang1.png) no-repeat center;
              background-size: 100% 100%;
            }
          }
          .left {
            .krTxtBox {
              &:first-child {
                &::before {
                  transform: scaleX(-1);
                }
              }
              &:last-child {
                &::before {
                  transform: rotate(180deg);
                }
              }
            }
          }
          .right {
            .krTxtBox {
              &:last-child {
                &::before {
                  transform: scaleY(-1);
                }
              }
            }
          }
        }
        .productionEquipmentBox {
          width: 130px;
          height: 130px;
          position: relative;
          .textZL {
            p {
              span {
                color: #00f6ff;
                font-size: 18px;
                margin-right: 3px;
              }
            }
            height: 130px;
            width: 130px;
            position: absolute;
            left: 0%;
            top: 0%;
            text-align: center;
            font-size: 12px;
            color: #bfc2c6;
            background: url(../../assets/img/huan1.png) no-repeat center;
            background-size: contain;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .productionEquipment {
            width: 130px;
            height: 130px;
          }
        }
      }
    }
  }
}
</style>